<template>
	<view class="mr-20" @click="handleClick">
		<view class="flex justify-center items-center" v-if="!item.needIcon">
			<text class="mr-10">{{item.text}}</text>
			<ImageBoxVue v-if="item.value === modelValue" src="/static/icons/selected.png" width="36rpx"
				height="36rpx"></ImageBoxVue>
			<ImageBoxVue v-else src="/static/icons/no_selected.png" width="36rpx" height="36rpx">
			</ImageBoxVue>
		</view>
		<view class="flex items-center" v-else>
			<template v-if="edit">
				<ImageBoxVue v-if="modelValue == item.num || item.editPrice == modelValue" src="/static/icons/selected.png" width="36rpx"
					height="36rpx"></ImageBoxVue>
				<ImageBoxVue v-else src="/static/icons/no_selected.png" width="36rpx" height="36rpx">
				</ImageBoxVue>
				<ImageBoxVue class="mr-10 ml-10"
					:src="type==1?'/static/icons/red.png':'/static/icons/blue.png'"
					width="28rpx" height="28rpx">
				</ImageBoxVue>
				<text class="mr-30">{{item.num}}颗</text>
				<uni-easyinput v-model="item.editPrice" type="number" placeholder="自定义金额" @change="handleChange(item)"></uni-easyinput>
			</template>
			<template v-else>
				<ImageBoxVue class="mr-10"
					:src="type==1?'/static/icons/red.png':'/static/icons/blue.png'"
					width="28rpx" height="28rpx">
				</ImageBoxVue>
				<text class="mr-10">{{item.num}}颗</text>
				<ImageBoxVue v-if="modelValue == item.num" src="/static/icons/selected.png" width="36rpx"
					height="36rpx"></ImageBoxVue>
				<ImageBoxVue v-else src="/static/icons/no_selected.png" width="36rpx" height="36rpx">
				</ImageBoxVue>
			</template>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue';
	// const {
	// 	type,
	// 	modelValue,
	// 	item,
	// 	edit,
	// } = defineProps(['type', 'edit', 'modelValue', 'item'])
	const props = defineProps({
		type: {
			default: 0
		},
		edit: {
			default: false,
		},
		modelValue: {
			default: ""
		},
		item: {
			default: () => {
				return {}
			}
		}
	})
	const emit = defineEmits(['update:modelValue', "change"])
	
	watch(() => props.modelValue, () => {
		if (props.edit && props.item.num != props.modelValue) {
			props.item.editPrice = null
		}
	}, {immediate: true})
	
	const handleChange = (item) => {
		if (Number(props.item.editPrice) > 0 && Number(props.item.num) > Number(props.item.editPrice)) {
			uni.showToast({
				icon: "none",
				title: "自定义金额必须大于固定金额！"
			})
			props.item.editPrice = null
		}
		if (!props.item.editPrice) {
			emit('update:modelValue', props.item.num)
		}
	}
	
	const handleClick = () => {
		if (props.item.needIcon) {
			emit('update:modelValue', props.item.num)
		}else {
			emit('update:modelValue', props.item.value)
		}
		emit('change', props.item.value)
	}
</script>

<style lang="scss" scoped>
	:deep(.uni-easyinput__content) {
		width: 180rpx;
		border-radius: 10rpx !important;
	}
</style>